<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>🎉 Happy New Year ~ 🎆🎆🎆</title>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }

      body {
        background-color: #111;
      }

      .fireworks-canvas, .word-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .word-container {
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }

      .word-canvas {
        will-change: transform;
      }
    </style>
  </head>

  <body>
    <canvas id="fireworks" class="fireworks-canvas"></canvas>
    <div class="word-container">
      <canvas id="word" class="word-canvas"></canvas>
    </div>

    <script src="./constants.js"></script>
    <script src="./utils.js"></script>
    <script src="./imageSrc.js"></script>
    <script src="./tinycolor.js"></script>
    <script src="./fireworks.js"></script>
    <script src="./word.js"></script>

    <script>
      {
        const dom = document.querySelector('#fireworks')
        const options = {}

        const fireworks = new Fireworks(dom, options)
        fireworks.start()

        dom.addEventListener('click', (event) => {
          fireworks.createFirework(event.offsetX, event.offsetY)
        })
      }

      {
        const dom = document.querySelector('#word')
        const image = imageSrc
        const word = new Word(dom, image)
        word.start()
      }
    </script>
  </body>
</html>
